<template>
  <div class="app-container">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <BottomNav />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from './store/user'
import BottomNav from './components/common/BottomNav.vue'

const userStore = useUserStore()

onMounted(() => {
  // 初始化主题
  userStore.initTheme()
})
</script>

<style lang="scss">
@use './assets/styles/theme.scss';
@use './assets/styles/reset.scss';
@use './assets/styles/common.scss';

.app-container {
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}
</style> 